<template>
    <div>
        <Category :scene="scene"></Category>

        <el-card style="margin:10px 0">
            <div v-show="scene == 0">
                <el-button type="primary" icon="Plus" @click="addSpu"
                    :disabled="categoryStore.C3Id ? false : true">添加SPU</el-button>
                <el-table border style="margin:10px 0" :data='records'>
                    <el-table-column label="序号" align="center" type="index" width="80px"></el-table-column>
                    <el-table-column label="SPU名称" align="center" width="160px" prop="spuName"></el-table-column>
                    <el-table-column label="SPU描述" align="center" show-overflow-tooltip prop="description">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="280px">
                        <template #default="{ row, $index }">
                            <el-button type="primary" icon="Plus" title="添加SKU" @click="AddSku(row)"></el-button>
                            <el-button type="primary" icon="Edit" title="修改SPU" @click="updateSpu(row)"></el-button>
                            <el-button type="primary" icon="View" title="查看SKU列表" @click="findSku(row)"></el-button>
                            <el-button type="primary" icon="Delete" title="删除SPU" @click="deleteSpu(row)"></el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7]"
                    :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                    @size-change="handleSizeChange" @current-change="getHasSpu" />
            </div>
            <spuForm v-show="scene == 1" @changeScene="changeScene" ref="spu"></spuForm>
            <skuForm v-show="scene == 2" @changeScene="changeScene" ref="sku"></skuForm>

            <el-dialog title="SKU列表" v-model="show">
                <el-table :data="skuArr">
                    <el-table-column label="SKU名字" prop="skuName"></el-table-column>
                    <el-table-column label="SKU价格" prop="price"></el-table-column>
                    <el-table-column label="SKU重量" prop="weight"></el-table-column>
                    <el-table-column label="SKU图片">
                        <template #="{ row, $index }">
                            <img :src="row.skuDefaultImg" width="100px" height="100px">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup lang='ts'>
import type { HasSpuResponseData } from '@/api/product/spu/type'
import { ref, watch ,onBeforeUnmount} from 'vue'
import spuForm from './spuForm.vue'
import skuForm from './skuForm.vue'
import useCategoryStore from '@/store/modules/category'
import { reqHasSpu, reqSkuList, reqDeleteSpu } from '@/api/product/spu'
const categoryStore = useCategoryStore()

const scene = ref(0)
const pageNo = ref(1)
const pageSize = ref(3)
const records = ref([])
const total = ref(0)
const spu = ref()
const sku = ref()
const skuArr = ref([])
const show = ref(false)

watch(() => categoryStore.C3Id, () => {
    records.value = []
    if (!categoryStore.C3Id) return
    getHasSpu()
})

const getHasSpu = async (page = 1) => {
    pageNo.value = page
    const res: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.C3Id)
    if (res.code == 200) {
        records.value = res.data.records
        total.value = res.data.total
    }
}

const handleSizeChange = () => {
    getHasSpu()
}

const addSpu = () => {
    scene.value = 1
    spu.value.initAddSpu(categoryStore.C3Id)
}

const changeScene = (num) => {
    scene.value = num
    getHasSpu()
}

const updateSpu = (row) => {
    scene.value = 1
    // console.log(spu)
    spu.value.initHasSpuData(row)
}

const AddSku = (row) => {
    scene.value = 2
    sku.value.initSkuData(categoryStore.C1Id, categoryStore.C2Id, row)
}

const findSku = async (row) => {
    const res = await reqSkuList(row.id)
    if (res.code == 200) {
        skuArr.value = res.data
        show.value = true
    }
}

const deleteSpu = async (row) => {
    const res = await reqDeleteSpu(row.id)
    if (res.code == 200) {
        getHasSpu(records.value.length > 1 ? pageNo.value : pageNo.value - 1)
    }
}

onBeforeUnmount(()=>{
    categoryStore.$reset()
})
</script>

<style scoped></style>